<?php
$this->title='speaking';
/* @var $this yii\web\View */
use \yii\helpers\Url;
use \yii\helpers\HtmlPurifier;
$this->registerCssFile('@web/css/note.css',['depends'=>['app\assets\AppAsset']]);
$this->registerJSFile('@web/js/speaking.js',['depends'=>['app\assets\AppAsset']]);
$this->registerJSFile('@web/js/savenote.js',['depends'=>['app\assets\AppAsset']]);
?>
<form action="?r=speaking/<?=$action;?>" id="nextque" method="post">
    <input type="hidden" name="page" value="<?=$page;?>">
    <input name="_csrf" type="hidden" id="_csrf" value="<?= Yii::$app->request->csrfToken ?>">
    <input name="usercheck" type="hidden" value="">
    <input type="hidden" name="post_type" value="">
</form>
<script>

    window.onload = function () {
        // 新加的一个表单，用于提交这一段的时间

        var $submit_time=$("[name=post_type]").clone(true).attr("name","time");
        $submit_time.appendTo("#nextque");
        var t=0;
        //计时
        $.ajax({
            url: "?r=ajax/gettime&state=<?=$state;?>&token=<?=$token;?>",
            dataType: 'json',
            type: 'get',
            success: function (data) {
                var $time=$("i.fa-clock-o");
                var sec=data.time;          //初始时间，以秒为单位
                setInterval(
                    function(){
                        sec++;
                        t++;
                        $time.html(secToMin(sec));
                        $submit_time.val(t);
                    },1000);
            }
        });
        if (document.getElementsByTagName("audio").length>0) {
            var $pauseplay=$(".pause-play");
            var audio=document.getElementsByTagName("audio")[0];
            // console.log(audio.duration);

            var isPlay=false;
            var $starttime=$(".start-time");
            var $endtime=$(".end-time");
            var $totalline=$(".play-line");
            var $curline=$(".play-current-line");
            var $playpoint=$(".play-point");
            var $faplay=$pauseplay.find('i');
            var $voltotalline=$(".volume-line");
            var volleft=$voltotalline.offset().left;
            var volwidth=$voltotalline.width();
            var $volpoint=$voltotalline.children('[class=volume-point]');
            var $volcurline=$voltotalline.children('[class=volume-current-line]');
            var play=null;
            var endsec=audio.duration;
            var getEndSec=setInterval(function(){
               if(!isNaN(endsec)){
                   $endtime.text(secToMinx(endsec));
                   clearInterval(getEndsec);
               }else{
                   endsec=audio.duration;
               }
            },200)
            $pauseplay.click(function(){
                isPlay=!isPlay;
                if (isPlay) {
                    $faplay.removeClass('fa-play').addClass('fa-pause');
                    audio.play();
                    play=setInterval(function(){
                        var curtime=audio.currentTime;
                        $starttime.text(secToMinx(curtime));
                        var percentage=curtime/endsec;
                        var pointleft=percentage*$totalline.width();
                        var curlinewidth=pointleft;
                        if (!audio.ended) {
                            $playpoint.css("left",pointleft-2+'px');
                            $curline.css("width",curlinewidth+'px');
                            // console.log("play");
                        }else{
                            clearInterval(play);
                            audio.current=0;
                            isPlay=false;
                            $faplay.removeClass('fa-pause').addClass('fa-play');
                        }
                    },1000)
                }
                else{
                    $faplay.removeClass('fa-pause').addClass('fa-play');
                    audio.pause();
                    clearInterval(play);
                }
            })
            $totalline.click(function(e){
                var totalwith=$totalline.width();
                var left=e.pageX-$totalline.offset().left;
                left=left<0?0:left;
                left=left>totalwith?totalwith:left;
                audio.currentTime=(left/totalwith)*endsec;
                isPlay=false;
                $pauseplay.click();
                // console.log("play");
            })
            var isDown=false;
            $playpoint.mousedown(function(e){
                isDown=true;
            })
            $(window).mousemove(function(e){
                if (isDown) {
                    var totalwith=$totalline.width();
                    var left=e.pageX-$totalline.offset().left;
                    left=left<0?0:left;
                    left=left>totalwith?totalwith:left;
                    $playpoint.css("left",left-2+'px');
                    $curline.css("width",left+'px');
                    audio.currentTime=(left/totalwith)*endsec;
                }
                if (isVolDown) {
                    setVol(e.pageX);
                }
            })
            $(window).mouseup(function(e){
                if (isDown) {
                    isDown=false;
                    isPlay=false;
                    $pauseplay.click();
                }
                if (isVolDown) {
                    isVolDown=false;
                    setVol(e.pageX);
                }
            })
            var isVolDown=false;
            $voltotalline.click(function(e){
                setVol(e.pageX);
            })
            $volpoint.mousedown(function(){
                isVolDown=true;
            })
            $(".volume-icon img").click(function(e){
                setVol(e.pageX);
            })
        }
        $(".pause-play").click();
        setInterval(function(){
            if (audio.ended) {
                $("#next").click();
            }
        },500)
        function setVol(event){
            var voltotal=$voltotalline.width();
            event=event<volleft?volleft:event;
            event=event>(volleft+volwidth)?(volleft+volwidth):event;
            var volume=(event-volleft)/volwidth;
            $volpoint.css("left",volume*volwidth-5	+'px');
            $volcurline.width(event-volleft);
            volume=volume.toFixed(2);
            volume=parseFloat(volume);
            audio.volume=volume;
        }
    };
</script>
<div class="container">
    <div class="leadx row clearfix">
        <div class="col-xs-3 pull-left">
            <span>
                Part
                <?=$speak_content['question_number'];
                ?>
                speaking
                Passage
                <?=$page-1;?>
                of
                <?=$speak_content['hear_number'];?>
            </span>
        </div>
        <div class="col-xs-1 pull-left notebook">
            <a href="#"><span><i class="fa fa-pencil-square-o"></i> 笔记</span></a>
        </div>
        <div class="col-xs-1 pull-right">
            <span><i class="fa fa-clock-o"></i></span>
        </div>
    </div>
    <div class="speak-wrap">
        <div class="speak-info row">
            Question
            <?=$speak_content['question_number']?>
            of
            6
        </div>
        <div class="audio">
            <div class="audio-play">
                <div class="audio-img">
                    <?php
                    $session = \Yii::$app->session;
                    $session->open();
                    $session['audio_img']=$speak_content['img_url'];
                    if($speak_content['type']==1)
                    {
                        if ($page-1 == 1)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                              <?php
                                }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                        else if ($page-1 == 2)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                    }
                    else if($speak_content['type']==2)
                    {
                        if ($page-1 == 1)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                        else if ($page-1 == 2)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                        else if($page-1 == 3)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                    }
                    else if($speak_content['type']==3)
                    {
                        if ($page-1 == 1)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                        else if ($page-1 == 2)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                        else if ($page - 1 == 5)
                        {
                            if ($speak_content['img_url']==null)
                            {
                                ?>
                                <img src="<?=Url::to('@web/images/2.png');?>">
                                <?php
                            }
                            else {
                                ?>
                                <img src="<?= $speak_content['img_url']; ?>">
                                <?php
                            }
                        }
                    }
                    ?>
                </div>
                <div class="audio-control clearfix">
                    <div class="pause-play pull-left">
                        <span><i class="fa fa-play"></i></span>
                    </div>
                    <div class="audio-time pull-left clearfix">
                        <div class="start-time pull-left">00:00</div>
                        <div class="play-line pull-left">
                            <div class="play-current-line"></div>
                            <div class="play-point"></div>
                        </div>
                        <div class="end-time pull-left"></div>
                    </div>
                    <div class="audio-volume pull-left clearfix">
                        <div class="volume-icon pull-left">
                            <span><img src="<?=Url::to('@web/images/6.png');?>"></span>
                        </div>
                        <div class="volume-line pull-left">
                            <div class="volume-current-line"></div>
                            <div class="volume-point"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
        $session = \Yii::$app->session;
        $session->open();
        if($speak_content['type']==1)
        {
            if ($page-1 == 1)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['direction']; ?>"></audio>
                <?php
            }
            else if ($page-1 == 2)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['topic_content']; ?>"></audio>
                <?php
            }
        }
        else if($speak_content['type']==2)
        {
            if ($page-1 == 1)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['direction']; ?>"></audio>
                <?php
            }
            else if ($page-1 == 2)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['listening_script']; ?>"></audio>
                <?php
            }
            else if($page-1 == 3)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['topic_content']; ?>"></audio>
                <?php
            }
        }
        else if($speak_content['type']==3)
        {
            if ($page-1 == 1)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['direction']; ?>"></audio>
                <?php
            }
            else if ($page-1 == 2)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['reading_tips']; ?>"></audio>
                <?php
            }
            else if ($page-1 == 5)
            {
                ?>
                <audio class="audio" src="<?= $speak_content['topic_content']; ?>"></audio>
                <?php
            }
        }
        ?>
    </div>
</div>

<div class="addnote">
    <div class="note-lead">
        <span id="note-word">笔记</span>
        <span class="close"><i class="fa fa-times"></i></span>
    </div>
    <div class="note-text">
        <div contenteditable="true" id="note-self"><?=HtmlPurifier::process($my_note['note']);?></div>
    </div>
    <form action="#" id="note-form">
        <button type="button" name="note-save" id="note-submit">Save and Close</button>
        <input type="hidden" name="saved-note" value="">
    </form>
</div>
